<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>DateTimePicker 日期时间选择器</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	<script src="../static/js/zh-cn.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">

</head>
<body>
<div id="app" class="">
	<el-affix :offset="10">
		<el-button type="primary" @click="seeValue('value1')">查看value1</el-button>
		<el-button type="primary" @click="seeValue('value2')">查看value2</el-button>
		<el-button type="primary" @click="seeValue('value3')">查看value3</el-button>
		<el-button type="primary" @click="seeValue('value4')">查看value4</el-button>
		<el-button type="primary" @click="seeValue('value5')">查看value5</el-button>
		<el-button type="primary" @click="seeValue('value6')">查看value6</el-button>
		<el-button type="primary" @click="seeValue('value7')">查看value7</el-button>
	</el-affix>
	
	<el-divider content-position="left">日期和时间点</el-divider><!-- =============================================================== -->
	<p class="desc">设置 type 为 datetimerange 即可选择日期和时间范围。 快捷方式的使用方法与 Date Picker 相同。</p>
	<div class="block">
		<span class="demonstration">默认：</span>
		<el-date-picker v-model="value1" type="datetime" placeholder="Select date and time" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
	</div>
	<div class="block">
		<span class="demonstration">使用快捷方式：</span>
		<el-date-picker v-model="value2" type="datetime" placeholder="Select date and time" :shortcuts="shortcuts"></el-date-picker>
	</div>
	<div class="block">
		<span class="demonstration">使用默认时间：</span>
		<el-date-picker v-model="value3" type="datetime" placeholder="Select date and time" :default-time="defaultTime"></el-date-picker>
	</div>
	
	<el-divider content-position="left">日期时间格式</el-divider><!-- =============================================================== -->
	<p class="desc">使用format指定输入框的格式。 使用value-format指定绑定值的格式。</p>
	<p class="desc">默认情况下，组件接受并返回Date对象。</p>
	<div class="demo-datetime-picker">
		<div class="block">
			<span class="demonstration">Emits Date object</span>
			<div class="demonstration">V1: {{ v1 }}</div>
			<el-date-picker v-model="v1" type="datetime" placeholder="Pick a Date" format="YYYY/MM/DD hh:mm:ss" />
		</div>
		<div class="block">
			<span class="demonstration">Use value-format</span>
			<div class="demonstration">V2：{{ v2 }}</div>
			<el-date-picker v-model="v2" type="datetime" placeholder="Pick a Date" format="YYYY/MM/DD hh:mm:ss" value-format="YYYY-MM-DD h:m:s a" />
		</div>
		<div class="block">
			<span class="demonstration">Timestamp</span>
			<div class="demonstration">V3：{{ v3 }}</div>
			<el-date-picker v-model="v3" type="datetime" placeholder="Pick a Date" format="YYYY/MM/DD hh:mm:ss" value-format="x" />
		</div>
	</div>
	
	
	
	<el-divider content-position="left">日期和时间范围</el-divider><!-- =============================================================== -->
	<p class="desc">设置type为datetimerange即可选择日期和时间范围</p>
	<div class="block">
		<span class="demonstration">默认：</span>
		<el-date-picker v-model="value4" type="datetimerange" range-separator="To" start-placeholder="Start date" end-placeholder="End date"></el-date-picker>
	</div>
	<div class="block">
		<span class="demonstration">使用快捷方式：</span>
		<el-date-picker v-model="value5" type="datetimerange" :shortcuts="shortcuts" range-separator="To" start-placeholder="Start date" end-placeholder="End date"></el-date-picker>
	</div>
	
	<el-divider content-position="left">默认的起始与结束时刻</el-divider><!-- =============================================================== -->
	<p class="desc">使用datetimerange进行范围选择时，在日期选择面板中选定起始与结束的日期，默认会使用该日期的00:00:00作为起始与结束的时刻；通过选项default-time可以控制选中起始与结束日期时所使用的具体时刻。 我们可以使用 default-time 属性来控制它。 default-time接受一个数组，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。 第一项控制开始日期的时间值，第二项控制结束日期的时间值</p>
	<div class="block">
		<span class="demonstration">Start date time 12:00:00</span>
		<el-date-picker v-model="value6" type="datetimerange" start-placeholder="Start Date" end-placeholder="End Date" :default-time="defaultTime1"></el-date-picker>
	  </div>
	  <div class="block">
		<span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span>
		<el-date-picker v-model="value7" type="datetimerange" start-placeholder="Start Date" end-placeholder="End Date" :default-time="defaultTime2"></el-date-picker>
	</div>
	
	
</div>
</body>
<script>
const Main = {
	data() {
		return {
			msg: 'Hello Vue!!',
			value: '',
			value1: '',
			value2: '',
			value3: '',
			value4: '',
			value5: '',
			value6: '',
			value7: '',
			defaultTime: new Date(2000, 1, 1, 12, 0, 0), // '12:00:00'
			defaultTime1: [new Date(2000, 1, 1, 12, 0, 0)], // '12:00:00'
			defaultTime2: [
				new Date(2000, 1, 1, 12, 0, 0),
				new Date(2000, 2, 1, 8, 0, 0),
			], // '12:00:00', '08:00:00'
			v1:'',
			v2:'',
			v3:'',
			v4:'',
			shortcuts: [
				{
					text: '今天',
					value: new Date(),
				},
				{
					text: '昨天',
					value: () => {
						const date = new Date()
						date.setTime(date.getTime() - 3600 * 1000 * 24)
						return date
					},
				},
				{
					text: '一周前',
					value: () => {
						const date = new Date()
						date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
						return date
					},
				},
			],
		}
	},
	methods:{
		handleChange(v){
			console.log(v)
		},
		seeValue(v){
			if(v == 'value1'){
				console.log(this.$data.value1);
			}else if(v == "value2"){
				console.log(this.$data.value2);
			}else if(v == "value3"){
				console.log(this.$data.value3);
			}else if(v == "value4"){
				console.log(this.$data.value4);
			}else if(v == "value5"){
				console.log(this.$data.value5);
			}else if(v == "value6"){
				console.log(this.$data.value6);
			}else if(v == "value7"){
				console.log(this.$data.value7);
			}
		}
	}
}
const app = Vue.createApp(Main);
// app.use(ElementPlus);
app.use(ElementPlus, {
	locale: ElementPlusLocaleZhCn,
})
app.mount("#app");



</script>
</html>
